<template>
  <div class="home-exhibition">
    <div class="part-1">
      <div class="left">
        <a href=""><img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/d692a30ee3d586c4274575eec255d3c5.jpg" alt=""></a>
      </div>
      <div class="right">
        <a href=""><img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/827a686678f39b1bbdc99c6e6b6a13c8.jpg?f=webp&w=537&h=378&bg=DAECFA" alt=""></a>
        <a href=""><img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/267e988a99b5cf4e960747e8aa5fa831.jpg?f=webp&w=537&h=378&bg=EDFBFC" alt=""></a>
      </div>
    </div>
    <div class="part-2">
      <a href=""><img src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/189acdf7e9b807cfc22d394df87c1958.jpg?f=webp&w=1080&h=420&bg=FEFEFE" alt=""></a>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import '../../assets/css/mixin';
.home-exhibition {
  width: px2rem(720 / 2);
  background-color: #F5F5F5;
  margin: 0 auto;
  padding: px2rem(16 / 2) 0;
  .part-1 {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    margin-bottom: px2rem(16 / 2);
    .left, .right {
      width: px2rem(358 /2 );
      img {
        display: block;
        width: 100%;
      }
    }
    .right {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }
  }
  .part-2 {
    img {
      display: block;
      width: 100%;
    }
  }
}
</style>
